<template>
	<view class="page">
		<view class="banner">
			<button open-type="getPhoneNumber" v-if="!login" class="loginbtn" @getphonenumber="getPhoneNumber">	
			</button>
			<image src="../../static/head-index.jpg" mode="" @tap="godetial" class="img"></image>
		</view>
		<view class="books">
			<view class="title">
				推荐书目
				<text class="more" @tap="goMore">查看更多</text>
			</view>
			<view class="items">
				<view class="item" v-for="(item,index) in list" :key="index" @tap="goBook(item)">
					<view class="imgBox" :style="{ backgroundImage: `url(${item.book_pic})`}"></view>
					<view class="name">{{item.book_name}}</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
	</view>
</template>

<script>
	import BASE_URL from '@/util/path.js';
	export default {
		data() {
			return {
				login: false,
				list:[]
			}
		},
		onShow() {
			this.getBook();
			const tel = uni.getStorageSync('tel');
			if(tel){
				this.login = true;
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			return {
				title: '倍阅读-红色共读',
				path: '/pages/index/index',
				imageUrl: ''
			}
		},
		onShareTimeline(){
			return {
				title: '倍阅读-红色共读',
				path: '/pages/index/index', // 分享默认跳转到页面地址
				success: () => {
					uni.showToast({
						title: '分享成功',
						duration: 3000,
					});
				},
				fail: () => {
					uni.showToast({
						title: '分享失败',
						icon: 'none',
						duration: 3000,
					});
				},
			};
		},
		onLoad() {
          
		},
		methods: {
		  goMore() {
			wx.navigateToMiniProgram({
			    appId: 'wx647fbc272d20c1e2',
			    path: '/pages/topic_list/topic_list?share=1&type=hot&title=2024年好书推荐&shopThemeId=599',//要打开B小程序的页面
			    extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
			    envVersion: 'release',//打开的对应小程序环境：开发develop、体验trial、生产release 
			    success(res) {
			        console.log('打开成功',res)
			    }
			})  
		  },
		  goBook(item) {
			wx.navigateToMiniProgram({
			    appId: 'wx647fbc272d20c1e2',
			    path: item.url,//要打开B小程序的页面
			    extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
			    envVersion: 'release',//打开的对应小程序环境：开发develop、体验trial、生产release 
			    success(res) {
			        console.log('打开成功',res)
			    }
			})  
		  },
		  godetial() {	
			const tel = uni.getStorageSync('tel'); 
			const code = uni.getStorageSync('code');
			 uni.navigateTo({
			 	url:"/pages/webview/webview?tel=" + tel +"&code=" + code
			 })
		  },
		  getBook() {
			  const _this = this;
			  uni.request({
			  	url: BASE_URL.lb + '/api/book_list',
			  	header: {
			  		'Content-Type': 'application/json'
			  	},
			  	method: 'post',
			  	data:{},
			  	success: (res) => {
			  		// console.log('res',res);
					if(res.data.status == 200) {
						 console.log(res.data.data)
						 _this.list = res.data.data;
						 console.log(_this.list)
					}
			  	},
			  	fail: (err) => {
			  		
			  	}
			  })
		  },
          getPhoneNumber(e) {
          	const _this = this
          	if (e.detail.errMsg == "getPhoneNumber:ok") {
          		console.log(e);
          		const {
          			code,
          			encryptedData,
          			iv
          		} = e.detail;
          		uni.login({
          			provider: 'weixin',
          			success: function  (res) {
          			// 登录成功，获取到用户信息
          			// console.log(res.errMsg)
          			if(_this.ready = false) {
          				return
          			}
          			   _this.ready = false;
          			   console.log('code',res.code)
          			   _this.local_login({
          				   encryptedData,
          				   iv,
          				   code:res.code
          			   })
          				
          			// TODO: 根据实际需求进行后续操作，如获取用户信息、跳转到其他页面等。
          		}
          	})
           }
          },
		  local_login(obj) {
		  	uni.showLoading({
		  		icon:'none'
		  	})
		  	const  _this = this;
		  	uni.request({
		  		url: BASE_URL.lb + '/wx_verify',
		  		header: {
		  			'Content-Type': 'application/json'
		  		},
		  		method: 'post',
		  		data:{code:obj.code},
		  		success: (res) => {
		  			uni.hideLoading();
		  			console.log(res);
		  			const {
		  				status,
		  				data,
		  				msg
		  			} = res.data;
		  			delete obj.code;
		  			if (status == 200) {
		  				const post_data = {
		  					...obj,
		  					...res.data.data
		  				}
						console.log(post_data);
		  				_this.weixinLogin(post_data)
		  				// console.log(post_data);
		  				uni.hideLoading()
		  			} else {
		  				uni.showToast({
		  					icon: 'none',
		  					title: msg + 'wx_verify'
		  				})
		  				return
		  			}
		  		},
		  		fail: (err) => {
		  			console.log(err)
		  		}
		  	})
		  },
		  weixinLogin (obj) {
		  	const _this = this;
		  	uni.showLoading({
		  		icon:'none'
		  	})
		  	uni.request({
		  		url: BASE_URL.lb + '/login_wx',
		  		header: {
		  			'Content-Type': 'application/json'
		  		},
		  		method: 'post',
		  		data:obj,
		  		success: (res) => {
		  			uni.hideLoading();
		  			// console.log(res);
		  			const {
		  				status,
		  				data,
		  				msg
		  			} = res.data;
		  			
		  			if (status == 200) {
		  				// console.log('data',data);
						uni.setStorageSync('tel',data.mobile);
						_this.getHhmltoken(data.mobile)
		  				// uni.setStorageSync('access_token',data.access_token);
		  				// uni.setStorage({
		  				// 	key: 'access_token',
		  				// 	data: data.access_token,
		  				// 	success: function () {
		  				// 		//console.log('success');
		  				// 		  _this.login = true;
		  				// 		 _this.ready = true;
		  				// 		_this.getDetail();
		  				// 	}
		  				// });
		  				// uni.navigateTo({
		  				// 	url:'/pages/list/list'
		  				// })
		  				// _this.weixinLogin(post_data)
		  				// console.log(post_data);
		  				uni.hideLoading()
		  			} else {
		  				uni.showToast({
		  					icon: 'none',
		  					title: msg + '/auth/login_wx'
		  				})
		  				return
		  			}
		  		},
		  		fail: (err) => {
		  			console.log(err)
		  		}
		  	})
		  },
		  getHhmltoken(tel) {
			  uni.request({
			  	url: BASE_URL.lb2 + '/api/user/get_activity_login',
			  	header: {
			  		'Content-Type': 'application/json'
			  	},
			  	method: 'post',
			  	data:{app_key:'pmyyuqkippgnpowdvd', app_secret:'maur0JgZtYjZYTOl4TAKIDIhIoH0u3St','user_mobile':tel},
			  	success: (res) => {
					console.log('res',res)
			  		uni.hideLoading();
			  		// console.log(res);
			  		const {
			  			status,
			  			data,
			  			msg
			  		} = res.data;
			  		
			  		if (status == 200) {
			  			//console.log('data',data);
					    uni.setStorageSync('code',data);
			  		    uni.navigateTo({
			  		    	url:"/pages/webview/webview?tel=" + tel +"&code=" + data
			  		    })
			  			// uni.hideLoading()
			  		} else {
			  			uni.showToast({
			  				icon: 'none',
			  				title: msg + '/auth/login_wx'
			  			})
			  			return
			  		}
			  	},
			  	fail: (err) => {
			  		console.log(err)
			  	}
			  })
		  }
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		min-height: 100vh;
		overflow-x: hidden;
		background-color: #f6f6f6;
	}
	.banner {
		width: 100%;
		height: 416.6rpx;
		position: relative;
		.loginbtn{
			position: absolute;
			left:0;
			top:0;
			right: 0;
			bottom: 0;
			background-color:transparent;
		}
		.img {
			width: 100%;
			height: 100%;
		}
	}
	
	
	.books, .videos {
		padding: 40rpx 30rpx 40rpx 30rpx;
	}
	.items {
		// background-color: #fff;
		border-radius: 20rpx;
		padding: 0;
		overflow: hidden;
		margin-bottom: 58rpx;
		margin-right: -20rpx;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content:space-between;
		
		.item {
			width: 212rpx;
			float: left;
			margin-right: 25rpx;
			flex: none;
			background-color: #fff;
			padding: 15rpx;
			margin-bottom: 25rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			// margin: 15rpx;
			.imgBox {
				width: 100%;
				height: 183rpx;
				margin-bottom: 10rpx;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			.name {
				height: 69rpx;
				font-size: 28rpx;
				line-height: 36rpx;
				display: -webkit-box;  
				-webkit-line-clamp: 2; /* 限制为两行 */  
				-webkit-box-orient: vertical;  
				overflow: hidden; /* 隐藏超出部分 */  
				text-overflow: ellipsis; /* 超出部分用省略号表示 */  
				white-space: normal; /* 允许换行 */  
			}
		}
	}
	
	.title {
		font-weight: bold;
		font-size: 38rpx;
		background-image: url('../../static/tabBg.png');
		background-size: auto 25rpx; 
		padding-bottom: 10rpx;
		background-position: 0 bottom;
		background-repeat: no-repeat;
		margin-bottom: 26rpx;
		position: relative;
		left: 34rpx;
		.more {
			font-weight: normal;
			color:#5e5e5e;
			font-size: 28rpx;
			position: absolute;
			right:55rpx;
			top:18rpx;
		}
	}
	
</style>
